@use 'sass:map';

@use '@/assets/styles/common/var.scss' as *;
@use '@/assets/styles/mixins/_button.scss' as *;
@use '@/assets/styles/mixins/mixins.scss' as *;
@use '@/assets/styles/mixins/utils.scss' as *;
@use '@/assets/styles/mixins/_var.scss' as *;


@include b(comment) {
    .user {
        position: relative;
        display: flex;

        .avatar {
            flex-shrink: 0;
            position: relative;
            width: 65px;
            height: 65px;
            border-radius: 44px;
            background-image: url("https://img1.baidu.com/it/u=1713520555,623151368&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500");
            background-color: $tts-bg-disabled;
            background-size: cover;
        }

        .name {
            flex: 1;
            font-size: 24px;
            line-height: 40px;
            padding-left: 20px;
            color: $tts-text-assist;

            .text {
                position: relative;
                font-weight: 600;
                line-height: 2;
                display: flex;
                align-content: center;
                justify-content: space-between;

                .create-time {
                    color: #999;
                    font-size: 22px;
                    font-weight: 400;
                    padding-right: 20px;
                }
            }

            .comment-text {
                position: relative;
                font-size: 24px;
                padding-bottom: 20px;
                line-height: 1.8;
                color: $tts-text-main;

                .reply-text {
                    width: 100%;
                    padding-right: 20px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    text-align: right;
                    color: $tts-main-color;
                }
            }
        }
    }
}
